<template>
	<!-- 设置 -->
	<view id="set">
		<view class="info">
			<view class="info-item">
				<view>头像</view>
				<image :src="vuex_user_info.headimgurl" class="img"></image>
			</view>
			<view class="info-item" style="border-top: 1rpx solid #ebeef5;">
				<view>昵称</view>
				<view class="info-edit">
					<!-- <image src="../../../static/mine/xg.png" class="icon"></image> -->
					<view class="txt">{{vuex_user_info.nickname}}</view>
				</view>
			</view>
		</view>
		
		<uni-collapse>
			<navigator url="./phone_list">
				<view class="clear">
					<view>通讯录</view>
					<view class="btn">编辑</view>
				</view>
			</navigator>

			<!-- <view class="versions" style="border-top: 1rpx solid #ebeef5; border-bottom: 1rpx solid #ebeef5;">
				<view>
					版本 <text>1.0</text>
				</view>
				<view class="new">已是最新</view>
			</view> -->
			
			<view class="clear" @click="see_protocal">
				<view>用户协议</view>
				<!-- <view class="btn">></view> -->
			</view>
			
			<view class="clear"  @click="see_about">
				<view>关于人人寻</view>
				<!-- <view class="btn">编辑</view> -->
			</view>
			
		</uni-collapse>
		
		<!-- <button class="out-btn" type="default">退出登录</button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods:{
			// 查看用户协议
			see_protocal(){
				uni.navigateTo({
					url:'./protocal'
				})
			},
			// 查看关于
			see_about(){
				uni.navigateTo({
					url:'./about'
				})
			}
			
			
			
		}
	}
</script>

<style lang="scss">
	page {
		position: relative;
		background-color: #f5f5f5;
	}

	#set {
		/deep/.uni-collapse-item__wrap {
			padding: 0 30rpx;
		}
		
		.info {
			background-color: #fff;
			margin: 11rpx 0;
			.info-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 30rpx;
				&:nth-child(2) {
					padding: 30rpx 30rpx;
				}
				.img {
					width: 62rpx;
					height: 62rpx;
					border-radius: 50%;
				}
				.icon {
					width: 24rpx;
					height: 24rpx;
					margin-right: 13rpx;
				}
				.txt {
					font-size: 20rpx;
					color: #808080;
				}
				.info-edit {
					display: flex;
					align-items: center;
				}
			}
		}
	
		.clear,
		.versions {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
		}
		.clear {
			.btn {
				width: 99rpx;
				height: 41rpx;
				line-height: 41rpx;
				text-align: center;
				font-size: 20rpx;
				background-color: #F5F5F5;
				color: #808080;
			}
		}
		.versions {
			text {
				margin-left: 18rpx;
				font-size: 20rpx;
				color: #808080;
			}
			.new {
				font-size: 20rpx;
				color: #808080;
			}
		}
		
		.out-btn {
			width: 750rpx;
			position: absolute;
			bottom: 0;
			color: #fff;
			background-color: #3AC7E5;
		}
	}
</style>
